<template>
  <el-dialog
    title="案件分发"
    :visible.sync="dialogVisible"
    custom-class="custom-dialog"
    width="50%"
    :before-close="handleClose"
    @opened="initData"
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="tree-panel">
          <div class="mb-10 pd-10">
            <el-input
              size="small"
              prefix-icon="el-icon-search"
              placeholder="输入关键字进行过滤"
              v-model="filterText"
            />
          </div>
          <div class="tree-content of-auto pd-10" style="height: 400px">
            <div class="line-tree-panel">
              <el-tree
                v-loading="deptTreeLoading"
                ref="tree"
                class="line-tree"
                node-key="id"
                :data="deptTree"
                :default-expanded-keys="expandedKeysDept"
                :props="deptProps"
                :filter-node-method="filterNode"
                @node-click="handleNodeClick"
              >
                <div slot-scope="{ node }" class="custom-tree-node">
                  <div
                    :title="node.label"
                    style="
                      white-space: normal;
                      word-break: break-all;
                      height: 40px;
                      display: flex;
                      width: 100%;
                      align-items: center;
                    "
                    :style="{
                      'font-size':
                        node.level === 1
                          ? '16px'
                          : node.level === 2
                          ? '16px'
                          : '16px',
                      'font-weight': node.level === 1 ? 'bold' : '',
                    }"
                  >
                    <span
                      v-if="
                        (node.level === 3 || node.level === 4) &&
                        node.childNodes.length === 0
                      "
                      class="ml-10 mr-10 w-5 h-5 radius-50 bg-999"
                    ></span>
                    <span
                      class="tree-icon"
                      :class="
                        node.childNodes.length === 0
                          ? 'level-4'
                          : node.level === 1
                          ? 'level-1'
                          : node.level === 2
                          ? 'level-2'
                          : node.level === 3
                          ? 'level-3'
                          : 'level-4'
                      "
                    />
                    <span style="line-height: 20px">{{ node.label }}</span>
                  </div>
                </div>
              </el-tree>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <el-form
          ref="form"
          class="query-more-form split-row"
          size="mini"
          label-width="85px"
          :model="dataForm"
          :rules="rules"
        >
          <el-row>
            <!-- <el-col :span="24">
              <el-form-item label="处置角色">
                <el-select
                  class="w-100"
                  v-model="dataForm.nextRoleId"
                  placeholder="请选择处置角色"
                  @change="getUserList"
                >
                  <el-option
                    :label="item.roleName"
                    :value="item.roleId"
                    v-for="item in roleList"
                    :key="item.roleId"
                  ></el-option
                ></el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-form-item label="处置人员">
                <el-select
                  class="w-100"
                  v-model="dataForm.nextUserId"
                  placeholder="请选择处置人员"
                  @visible-change="visibleChange"
                >
                  <el-option
                    :label="item.userName"
                    :value="item.userId"
                    v-for="item in userList"
                    :key="item.userId"
                  ></el-option
                ></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="限制时间" prop="planCompleteTime">
                <el-date-picker
                  v-model="dataForm.planCompleteTime"
                  type="datetime"
                  placeholder="选择限制时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="分发意见" prop="opinion">
                <el-input
                  v-model="dataForm.opinion"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入分发意见"
                  maxlength="500"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="flex-start-center">
                <el-button size="mini" class="submit-btn" @click="handleSave()" :disabled='handleSaveDisabled'
                  >确认</el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { roleDeptTreeselect } from "@/api/system/dept";
import { wfmCaseDistribute } from "@/api/wfm/wfm.js";
import { handleList } from "@/api/user.js";
import { list as roleList } from "@/api/role.js";
export default {
  name: "DispatchDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    caseCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      deptTreeLoading: false,
      deptTree: [],
      userList: [],
      roleList: [],
      deptProps: {
        children: "children",
        label: "label",
      },
      expandedKeysDept: [],
      handleSaveDisabled:false,       //控制确认按钮是否为禁用状态
      filterText: "",
      dataForm: {
        caseCode: "",
        opinion: "",
        planCompleteTime: "",
        nextDeptId: null,
        nextDeptName: "",
        nextRoleId: null,
        nextRoleName: "",
        nextUserId: null,
        nextUserName: "",
      },
      rules: {
        planCompleteTime: [
          { required: true, message: "选择限制时间", trigger: "change" },
        ],
        opinion: [
          { required: true, message: "请输入分发意见", trigger: "blur" },
        ],
        nextUserId: [
          { required: true, message: "请输入分发意见", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {},
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    initData() {
      this.dataForm.caseCode = this.caseCode;
      this.deptTreeLoading = true;
      roleDeptTreeselect(1)
        .then((res) => {
          this.deptTree = res.depts;
          if (res.depts && res.depts.length > 0) {
            this.expandedKeysDept = res.depts.map((item) => item.id);
          }
          this.deptTreeLoading = false;
        })
        .catch(() => {
          this.deptTreeLoading = false;
        });
      roleList()
        .then((res) => {
          let { code, rows, total } = res;
          if (code == 200) {
            this.roleList = rows;
          }
        })
        .catch(() => {});
      this.getUserList();
    },
    getUserList() {
      const params = {
        deptId: this.dataForm.nextDeptId,
      };
      handleList(params)
        .then((res) => {
          let { code, rows, total } = res;
          if (code == 200) {
            this.userList = rows;
          }
        })
        .catch(() => {});
    },
    visibleChange(val) {
      if (val) {
        if (this.dataForm.nextDeptId === "") {
          this.$message.warning("请先选择部门");
        }
      }
    },
    handleClose() {
      this.$emit("closeDialog");
      this.clearData();
    },
    handleSave() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
           this.handleSaveDisabled=true;
          this.dataForm.planCompleteTime =
            new Date(this.dataForm.planCompleteTime).getTime() / 1000;
          if (!this.dataForm.nextDeptId) {
            this.$message.warning("请选择部门");
            return;
          }
          wfmCaseDistribute(this.dataForm)
            .then((res) => {
              let { code } = res;
              if (code == 200) {
                this.$message.success("保存成功");
                this.handleSaveDisabled=false;
                this.clearData();
                this.handleClose();
              }
            })
            .catch(() => {
              this.$message.error("保存失败");
            });
        }
      });
    },
    clearData() {
      this.dataForm = {
        caseCode: "",
        opinion: "",
        planCompleteTime: "",
        nextDeptId: null,
        nextDeptName: "",
        nextRoleId: null,
        nextRoleName: "",
        nextUserId: null,
        nextUserName: "",
      };
      this.$refs["form"].clearValidate();
      this.filterText = null;
    },
    handleNodeClick(data, node) {
      this.dataForm.nextDeptId = data.id;
      this.dataForm.nextDeptName = data.label;
      this.dataForm.nextUserId=null
      this.userList=[];
      this.getUserList();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
